/**
 * 高级搜索
 */
import React, { Fragment } from 'react';
import { Form, DatePicker, Input, TreeSelect } from 'antd';
import moment from 'moment';

import AdvancedSearch from '@/components/AdvancedSearch';
import { useEffectOnce } from 'react-use';
import OrganizationSelect from '@/components/OrganizationSelect';

const { RangePicker } = DatePicker;
const { TreeNode } = TreeSelect;

const InputStyle = {
    // minWidth: 360
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const renderApplyTypeTreeNodes = (treeSelectDate = []) =>
    treeSelectDate.map(item => {
        if (item.templateList) {
            return (
                <TreeNode key={item.category} title={item.category} value={item.category}>
                    {renderApplyTypeTreeNodes(item.templateList)}
                </TreeNode>
            );
        }
        return <TreeNode key={item.templateId} title={item.templateName} value={item.templateName} />;
    });

const FormAdvanced = props => {
    const { form, query = {}, onSearch, onReset } = props;
    const { getFieldDecorator } = form;

    const initialValue = React.useMemo(() => {
        const startTime = query.startTime ? moment(query.startTime) : '';
        const endTime = query.endTime ? moment(query.endTime) : '';
        const range = [startTime, endTime];

        // 注意：URL 获取的数据可能为 string
        return {
            employeeName: query.employeeName,
            companyCode: query?.companyCode,
            departmentCode: query?.departmentCode,
            range
        };
    }, [query]);

    // 表单数据
    const handleSubmit = () => {
        form.validateFieldsAndScroll((err, value) => {
            if (!err) {
                const { companyCode, departmentCode, employeeName = '', range = [] } = value;
                const [startTime = '', endTime = ''] = range;

                const finalValue = {
                    companyCode,
                    departmentCode,
                    startTime: startTime ? startTime.format('YYYY-MM-DD 00:00:00') : '',
                    endTime: endTime ? endTime.format('YYYY-MM-DD 23:59:59') : '',
                    employeeName
                };
                onSearch(finalValue);
            }
        });
    };

    // 由组件进行首次的数据加载, 解决搜索条件初始化的问题
    useEffectOnce(() => {
        handleSubmit();
    });

    const handleReset = () => {
        form.resetFields();
        onReset();
    };

    const isCollapsed = React.useMemo(() => {
        if (query.startTime || query.companyCode) {
            return true;
        }
        return false;
    }, []);

    return (
        <Fragment>
            <AdvancedSearch
                form={form}
                onSubmit={handleSubmit}
                onReset={handleReset}
                expand={isCollapsed}
                colConfig={{
                    xxl: 8,
                    xl: 8,
                    lg: 12,
                    md: 24,
                    sm: 24,
                    xs: 24
                }}
            >
                <Form.Item label="离职员工">
                    {getFieldDecorator('employeeName', { initialValue: initialValue.employeeName })(
                        <Input style={InputStyle} placeholder="请输入员工姓名" allowClear />
                    )}
                </Form.Item>
                <Form.Item label="离职日期">
                    {getFieldDecorator('range', { initialValue: initialValue.range })(
                        <RangePicker format="YYYY-MM-DD" />
                    )}
                </Form.Item>

                <Form.Item label="组织机构">
                    {getFieldDecorator('departmentCode', { initialValue: initialValue.departmentCode })(
                        <OrganizationSelect isFunctional isNeedPermission />
                    )}
                </Form.Item>
                <Form.Item label="行政机构">
                    {getFieldDecorator('companyCode', { initialValue: initialValue.companyCode })(
                        <OrganizationSelect isNeedPermission />
                    )}
                </Form.Item>
            </AdvancedSearch>
        </Fragment>
    );
};

export default Form.create()(FormAdvanced);
